body{
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-items: center;
    
    #slide{
        display: flex;
        position: relative;
        // transform-style: preserve-3d;
        // transition-duration: 2s;
        // transform:perspective(900px);
        &:hover{
           // transform:perspective(900px) rotateY(60deg) rotateX(60deg)
        }
        section{
            transition-duration: 1s;
            transform-style: preserve-3d;
            position: relative;
            div{
                overflow: hidden;
                position: absolute;
                @for $i from 1 to 5 {
                    &:nth-child(#{$i}){
                        transform:rotateX(#{$i * 90}deg)
                    }
                }
            }
        }
        .btns{
            position: absolute;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            display: flex;
            justify-content: space-around;
            span{
                width: 15px;
                height: 15px;
                color: white;
                background-color: red;
                opacity: 0.6;
                padding: 8px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                &.active{
                    background-color: gray;
                    border: solid 1px black;
                }
            }
        }
    }

}